import React, { Component } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import { Row, Col, Card, Button, Input, message, Icon, Divider, Tooltip } from "antd";
import styles from "./searchResult.less";
import { getDocSearch } from '@/services/search';

class SearchResult extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            searchContent: '',
            pdfUrl: '',
            pdfTitle: '',
            activeKey: 0,
        };
    }

    componentDidMount() {
        const { location: { query: { content } } } = this.props;
        this.getSearch(content);
    }

    getSearch = async content => {
        let res = await getDocSearch({ text: content });
        console.log(res);
        // this._init_(res && res.length > 0 ? res[0]?.docPath : '');
        this.setState({
            searchContent: content,
            list: res && res.length > 0 ? res.map(item => ({
                ...item,
                content: item?.content?.slice(this.getStrHtml(item?.content).length, -1),
            })) : [],
            pdfUrl: res && res.length > 0 ? res[0]?.docPath : '',
            pdfTitle: res && res.length > 0 ? res[0]?.docTitle : '',
        })
    }

    getStr(str) {
        return str.match(/\n(?:[^\n])*/g, function (s) {
            return s;
        })
    }

    getStrHtml = (str) => {
        var v = (this.getStr(str)[0].replace(/\n(([\w])+)?n/g, function ($1, $2) {
            return $2;
        }).split(" "))[0];

        return this.getStr(str)[0] + "/n";
    }

    setFileItem = (row, index) => {
        this.setState({ pdfUrl: row?.docPath, pdfTitle: row?.docTitle, activeKey: index })
    }

    onValueChange = value => {
        this.setState({ searchContent: value })
    }

    onValueSearch = value => {
        const { dispatch } = this.props;
        let pathname = "/searchResult";
        dispatch(routerRedux.push({ pathname, query: { content: value } }));
        this.getSearch(value);
    }

    render() {
        const { list, pdfTitle, pdfUrl, searchContent, activeKey } = this.state;

        return (
            <Card bordered={false} style={{ height: '100%' }} bodyStyle={{ height: '100%' }}>
                <div className={styles.searchResult}>
                    <div style={{ height: '100%', display: 'flex', gap: '16px' }}>
                        <div style={{ borderRight: '1px solid #E8E8E8', paddingRight: 16, width: '64%', }}>
                            <div style={{ height: '100%', padding: '10px 0' }}>
                                <iframe src={pdfUrl} width="100%" height="100%" frameborder="0" />
                            </div>
                        </div>
                        <div style={{ flex: 1 }}>
                            <div style={{ position: 'relative', height: '100%' }}>
                                <div style={{ position: 'absolute', top: '10px', right: 0 }}>
                                    <Tooltip title="返回搜索页">
                                        <span
                                            style={{
                                                border: '1px solid #AAA',
                                                borderRadius: '20px',
                                                padding: '10px 8px 5px',
                                                cursor: 'pointer',
                                            }}
                                            onClick={this.nextRouter}
                                        >
                                            <Icon type="undo" style={{ fontSize: '20px' }} />
                                        </span>
                                    </Tooltip>
                                </div>
                                <div style={{ textAlign: 'center' }}>
                                    <Input
                                        placeholder="输入关键信息检索产品"
                                        prefix={<Icon type="search" />}
                                        style={{ width: '80%' }}
                                        size="large"
                                        value={searchContent}
                                        onChange={e => this.onValueChange(e.target.value)}
                                        onPressEnter={e => this.onValueSearch(e.target.value)}
                                    />
                                </div>
                                <div style={{ padding: '20px 0 12px', height: 'calc(100% - 24px)' }}>
                                    <div style={{ height: '100%', overflowX: 'hidden', overflowY: 'scroll', paddingRight: 3 }}>
                                        <Row>
                                            {list.map((item, index) => (
                                                <Col span={24} key={index}>
                                                    <div
                                                        style={{
                                                            padding: '12px',
                                                            height: '100%',
                                                            cursor: 'pointer',
                                                            background: activeKey == index ? '#e0f1ff' : '',
                                                        }}
                                                        className={styles.activeCalss}
                                                        onClick={() => this.setFileItem(item, index)}
                                                    >
                                                        <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '12px' }}>
                                                            <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                                                <span>{item.docTitle}</span>
                                                                <span>{`${(item?.score?.toFixed(2) * 100).toFixed()}%`}</span>
                                                            </span>
                                                        </div>
                                                        <div style={{ WebkitBoxOrient: 'vertical', }} className={styles.content}>{item.content}</div>
                                                    </div>
                                                    {list.length == (index + 1) ? null : <Divider style={{ margin: '0' }} />}
                                                </Col>
                                            ))}
                                        </Row>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Card>
        );
    }

    nextRouter = () => {
		const { dispatch } = this.props;
		let pathname = "/search";
		dispatch(routerRedux.push({ pathname }));
	}
}

export default connect()(SearchResult);
